<template>
  <div>
    <div><h1>商品明细</h1></div>
    <div>
      <el-descriptions title="商品明细">
        <el-descriptions-item label="商品ID">{{
          prodList.prodId
        }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{
          prodList.prodName
        }}</el-descriptions-item>
        <el-descriptions-item label="SPU">{{
          prodList.prodSpu
        }}</el-descriptions-item>
        <el-descriptions-item label="图片">
          <el-image
            :src="prodList.prodImage"
            style="width: 50px; height: 50px"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ prodList.createTime }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div><el-button type="primary" @click="getaddinfo">添加SKU</el-button></div>
    <div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="infoId" label="ID" width="100" />
        <el-table-column prop="prodName" label="商品名称" width="120" />
        <el-table-column prop="prodSku" label="SKU" width="120" />
        <el-table-column prop="prodPrice" label="商品售价" width="100" />
        <el-table-column prop="costPrice" label="成本价" width="100" />
        <el-table-column prop="prodStock" label="库存" width="100" />
        <el-table-column label="操作" width="100" />
      </el-table>
    </div>
    <div>
      <el-dialog v-model="dialogFormVisible" title="商品明细添加" width="500">
        <el-form :model="form">
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            <el-input v-model="form.prodName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品SKU" :label-width="formLabelWidth">
            <el-input v-model="form.prodSku" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品成本价" :label-width="formLabelWidth">
            <el-input v-model="form.costPrice" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品售价" :label-width="formLabelWidth">
            <el-input v-model="form.prodPrice" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品库存" :label-width="formLabelWidth">
            <el-input v-model="form.prodStock" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">Cancel</el-button>
            <el-button type="primary" @click="onAddProdInfo"> 保存 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const prodId = route.params.prodId;
console.log(prodId, "-----------");
import { getProdandInfoListById, getAddProdInfo } from "../api/api";
import { ElMessage } from "element-plus";

const dialogFormVisible = ref(false);
const formLabelWidth = "140px";

const form = ref({
  buyNum: 1,
  costPrice: null,
  createBy: "",
  createTime: "",
  infoId: null,
  prodId: null,
  prodName: "",
  prodPrice: null,
  prodSku: "",
  prodStock: null,
  updateBy: "",
  updateTime: "",
});
const tableData = ref([]);
const prodList = ref({
  prodId: null,
  prodSpu: "",
  prodKind: null,
  prodType: null,
  prodStatus: null,
  prodName: "",
  brandId: null,
  unitId: null,
  tagId: null,
  appr: "",
  prodImage: "",
  createBy: null,
  createTime: "",
  updateBy: null,
  updateTime: null,
  kindName: null,
  unitName: null,
  tagName: null,
  typeName: null,
  brandName: null,
  prodPrice: null,
  tbProdInfos: [],
});

//显示添加商品明细框
const getaddinfo = () => {
  form.value = {
    buyNum: 1,
    costPrice: null,
    createBy: "",
    createTime: "",
    infoId: null,
    prodId: null,
    prodName: "",
    prodPrice: null,
    prodSku: "",
    prodStock: null,
    updateBy: "",
    updateTime: "",
  };
  form.value.prodId = prodId;
  dialogFormVisible.value = true;
};

//添加商品明细
const onAddProdInfo = () => {
  getAddProdInfo(form.value).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("商品明细添加成功");
      getprodInfo();
      dialogFormVisible.value = false;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

//展示商品明细
const getprodInfo = () => {
  getProdandInfoListById(prodId).then((res) => {
    if (res.data.code == 200) {
      prodList.value = res.data.data;
      tableData.value = prodList.value.tbProdInfos;
    }
  });
};

onMounted(() => {
  getprodInfo();
});
</script>

<style scoped></style>
